<template>
  <div class="counter-hook-demo p-4">
    <div class="space-y-6">
      <!-- 基础计数器 -->
      <div class="counter-section">
        <h4 class="counter-title">基础计数器</h4>
        <div class="space-y-3">
          <div class="flex items-center justify-center space-x-4">
            <button
              @click="basicCounter.decrement()"
              :disabled="basicCounter.isAtMin.value"
              class="btn-counter btn-red"
            >
              -
            </button>
            <div class="counter-display">{{ basicCounter.count.value }}</div>
            <button
              @click="basicCounter.increment()"
              :disabled="basicCounter.isAtMax.value"
              class="btn-counter btn-blue"
            >
              +
            </button>
          </div>
          <div class="flex justify-center space-x-2">
            <button @click="basicCounter.reset()" class="btn-small">重置</button>
            <button @click="basicCounter.set(50)" class="btn-small">设为 50</button>
            <button @click="basicCounter.toggle(0, 100)" class="btn-small">切换 0/100</button>
          </div>
        </div>
      </div>

      <!-- 有限制的计数器 -->
      <div class="counter-section">
        <h4 class="counter-title">有限制的计数器 (0-10)</h4>
        <div class="space-y-3">
          <div class="flex items-center justify-center space-x-4">
            <button
              @click="limitedCounter.decrement()"
              :disabled="limitedCounter.isAtMin.value"
              class="btn-counter btn-red"
            >
              -
            </button>
            <div class="counter-display">{{ limitedCounter.count.value }}</div>
            <button
              @click="limitedCounter.increment()"
              :disabled="limitedCounter.isAtMax.value"
              class="btn-counter btn-blue"
            >
              +
            </button>
          </div>

          <!-- 进度条 -->
          <div class="w-full bg-gray-200 rounded-full h-2">
            <div
              class="bg-blue-600 h-2 rounded-full transition-all duration-300"
              :style="{ width: limitedCounter.percentage.value + '%' }"
            ></div>
          </div>
          <div class="text-center text-sm text-gray-600">
            进度: {{ Math.round(limitedCounter.percentage.value) }}%
          </div>

          <div class="flex justify-center space-x-2">
            <button @click="limitedCounter.reset()" class="btn-small">重置</button>
            <button @click="limitedCounter.set(5)" class="btn-small">设为中间值</button>
          </div>
        </div>
      </div>

      <!-- 步长计数器 -->
      <div class="counter-section">
        <h4 class="counter-title">步长计数器 (步长: 5)</h4>
        <div class="space-y-3">
          <div class="flex items-center justify-center space-x-4">
            <button @click="stepCounter.decrement()" class="btn-counter btn-red">-5</button>
            <div class="counter-display">{{ stepCounter.count.value }}</div>
            <button @click="stepCounter.increment()" class="btn-counter btn-blue">+5</button>
          </div>

          <div class="flex justify-center space-x-2">
            <button @click="stepCounter.increment(1)" class="btn-small">+1</button>
            <button @click="stepCounter.increment(10)" class="btn-small">+10</button>
            <button @click="stepCounter.decrement(3)" class="btn-small">-3</button>
            <button @click="stepCounter.reset()" class="btn-small">重置</button>
          </div>
        </div>
      </div>

      <!-- 多个计数器状态对比 -->
      <div class="counter-section">
        <h4 class="counter-title">计数器状态对比</h4>
        <div class="grid grid-cols-3 gap-4 text-sm">
          <div class="status-card">
            <div class="status-title">基础计数器</div>
            <div class="status-value">{{ basicCounter.count.value }}</div>
            <div class="status-info">
              <div>最小值: {{ basicCounter.isAtMin.value ? '是' : '否' }}</div>
              <div>最大值: {{ basicCounter.isAtMax.value ? '是' : '否' }}</div>
            </div>
          </div>
          <div class="status-card">
            <div class="status-title">限制计数器</div>
            <div class="status-value">{{ limitedCounter.count.value }}</div>
            <div class="status-info">
              <div>最小值: {{ limitedCounter.isAtMin.value ? '是' : '否' }}</div>
              <div>最大值: {{ limitedCounter.isAtMax.value ? '是' : '否' }}</div>
            </div>
          </div>
          <div class="status-card">
            <div class="status-title">步长计数器</div>
            <div class="status-value">{{ stepCounter.count.value }}</div>
            <div class="status-info">
              <div>最小值: {{ stepCounter.isAtMin.value ? '是' : '否' }}</div>
              <div>最大值: {{ stepCounter.isAtMax.value ? '是' : '否' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Hook 说明 -->
    <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded">
      <h5 class="text-sm font-medium text-green-800 mb-2">🔧 useCounter Hook 特性</h5>
      <ul class="text-xs text-green-700 space-y-1">
        <li>• <strong>灵活配置</strong>: 支持初始值、最小值、最大值、步长设置</li>
        <li>• <strong>状态计算</strong>: 自动计算是否达到边界值和百分比进度</li>
        <li>• <strong>丰富方法</strong>: increment、decrement、reset、set、toggle</li>
        <li>• <strong>类型安全</strong>: 完整的 TypeScript 类型定义</li>
        <li>• <strong>响应式</strong>: 所有状态都是响应式的，UI 自动更新</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCounter } from '@/hooks/useCounter'

// 基础计数器
const basicCounter = useCounter()

// 有限制的计数器 (0-10)
const limitedCounter = useCounter({
  initialValue: 5,
  min: 0,
  max: 10,
  step: 1,
})

// 步长计数器
const stepCounter = useCounter({
  initialValue: 0,
  step: 5,
})
</script>

<style scoped lang="scss">
.counter-hook-demo {
  @apply bg-gray-50;
}

.counter-section {
  @apply p-4 bg-white rounded-lg border border-gray-200;
}

.counter-title {
  @apply text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200;
}

.counter-display {
  @apply text-3xl font-bold text-blue-600 bg-blue-50 px-6 py-3 rounded-lg min-w-[80px] text-center;
}

.btn-counter {
  @apply w-12 h-12 rounded-full font-bold text-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;

  &.btn-blue {
    @apply bg-blue-500 text-white hover:bg-blue-600 active:scale-95;
  }

  &.btn-red {
    @apply bg-red-500 text-white hover:bg-red-600 active:scale-95;
  }
}

.btn-small {
  @apply px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors;
}

.status-card {
  @apply p-3 bg-gray-50 rounded border;
}

.status-title {
  @apply font-medium text-gray-700 mb-2;
}

.status-value {
  @apply text-2xl font-bold text-blue-600 mb-2;
}

.status-info {
  @apply text-xs text-gray-600 space-y-1;
}
</style>
